<template>
  <div class="wrapper" :class="toggleClass" v-loading.body="loading">

    <vHeader></vHeader>

    <div class="menu-toggle" @click="menuToggle">
      <i class="fa fa-arrow-left"></i>
    </div>

    <vSidebar></vSidebar>

    <div class="content">
      <transition name="move" mode="out-in"><router-view></router-view></transition>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import vHeader from './header.vue'
  import vSidebar from './sidebar.vue'
  import { mapState } from 'vuex'
  import setTableTtile from './js/setTableTitle'
  export default {
    components: { vHeader, vSidebar },
    data () {
      return {
        toggle: false
      }
    },
    computed: mapState({
      loading: state => state.loading,
      toggleClass: state => state.toggleClass
    }),
    mounted () {
      this.onReady()
      this.routerChange()
    },
    methods: {
      menuToggle () { // 目录切换
        let store = this.$store
        this.toggleClass['isMenu-active'] === false ? store.dispatch('setMenuActive', true) : store.dispatch('setMenuActive', false)
        this.toggleClass['isHeader-active'] === false ? store.dispatch('setHeaderActive', true) : store.dispatch('setHeaderActive', false)
      },
      onReady () { // 载入页面
        let that = this
        let arr = JSON.parse(localStorage.getItem('userRouterData'))
        let path = that.$route.path.replace('/', '')
        that.$store.dispatch('setClearTableData')
        that.$store.dispatch('setClearPage')
        if (path !== 'readme') {
          that.$store.dispatch('setTableTitle', setTableTtile(path, arr)) // 写入表格标题
          that.$store.dispatch('setTable', that.$table[path]) // 写入展示table
        }
      },
      routerChange () { // 路由切换
        let that = this
        let arr = JSON.parse(localStorage.getItem('userRouterData'))
        that.$router.beforeEach((to, from, next) => {
          let path = to.path.replace('/', '')
          that.$store.dispatch('setClearTableData')
          that.$store.dispatch('setClearPage')
          if (to.path !== 'readme') {
            that.$store.dispatch('setTableTitle', setTableTtile(path, arr)) // 写入表格标题
            that.$store.dispatch('setTable', that.$table[path]) // 写入展示table
          }
          next()
        })
      }
    }
  }
</script>
